import React, { Component } from 'react'
// 引入echart
import echarts from '@/lib/echarts'
// 引入connect
import { connect } from 'react-redux'
// sidebarCollapsed
import { debounce } from '@/utils'

class LineChart extends Component {
    // 需要传入的属性优先在这里定义
    static defaultProps = {
        width: '100%',
        height: '350px',
        styles: {},
        className: '',
    }
    // 定义初始参数
    state = {
        chart: null
    }
    // dom挂载之后是不是需要执行
    componentDidMount() {
        this.initChart()
        // 窗口改变需要执行chart的resize
        window.addEventListener('resize', () => this.resize())
    }
    resize() {
        const chart = this.state.chart;
        if (chart) {
            debounce(chart.resize.bind(this), 300)()
        }
    }
    componentWillReceiveProps(nextProps) {
        // 监听菜单变化
        if (nextProps.sidebarCollapsed !== this.props.sidebarCollapsed) {
            setTimeout(() => {
                this.resize()
            }, 300)
        }
        if (nextProps.chartData !== this.props.chartData) {
            this.initChart()
            debounce(this.initChart.bind(this), 300)()
        }
    }
    // 组件销毁时要做的事情
    componentWillUnmount() {
        if (!this.state.chart) {
            return
        }
        this.setState({ chart: null });
    }
    // 初始化echart方法
    initChart() {
        this.setState({ chart: echarts.init(this.el, 'macarons') }, () => {
            // 给echart 去做配置
            this.setOptions(this.props.chartData)
        })
    }
    setOptions({ expectData, actualData } = {}) {
        console.log(expectData, actualData)
        this.state.chart.setOption({
            // 设置背景
            backgroundColor: '#fff',
            // x轴配置
            xAxis: {
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                boundaryGap: false, // 使x轴的数据两边没有空格
                axisTick: {
                    show: false
                }
            },
            // 全局配置
            grid: {
                left: 10,
                right: 10,
                top: 30,
                bottom: 10,
                containLabel: true,
            },
            // hover 的弹框 
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
                padding: [5, 10]
            },
            yAxis: {
                axisTick: {
                    show: false
                }
            },
            // 图例配置
            legend: {
                data: ['期望人数', '实际人数'],
            },
            // 数据项
            series: [
                {
                    name: '期望人数',
                    itemStyle: {
                        normal: {
                            color: '#ff005a',
                            lineStyle: {
                                color: '#ff005a',
                                width: 2
                            }
                        }
                    },
                    smooth: true, // 是否平滑曲线显示
                    type: 'line',
                    data: expectData,
                    animationDuration: 2800,
                    animationEasing: 'cubicInout',
                },
                {
                    name: '实际人数',
                    itemStyle: {
                        normal: {
                            color: '#3888fa',
                            lineStyle: {
                                color: '#3888fa',
                                width: 2
                            }
                        }
                    },
                    smooth: true, // 是否平滑曲线显示
                    type: 'line',
                    data: actualData,
                    animationDuration: 2800,
                    animationEasing: 'cubicInout',
                },
            ]
        })
    }
    // 先布局 然后再根据功能去实现逻辑
    render() {
        // 传的props 在这里取值
        // props 会包含 width,height,styles
        const { height, width, styles, className } = this.props;
        return (
            <div className={className}
                ref={(el) => (this.el = el)}
                style={
                    {
                        width,
                        height,
                        ...styles
                    }
                }
            ></div>
        )
    }
}

export default connect((state) => state.app)(LineChart) 